<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<html lang="en" class="no-js" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>运营后台</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <meta content="" name="description"/>
    <meta content="" name="author"/>
    <link href="/static/assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <link href="/static/assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="/static/assets/global/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css"/>
    <link href="/static/assets/global/plugins/bootstrap-daterangepicker/daterangepicker-bs3.css" rel="stylesheet" type="text/css"/>
    <link href="/static/assets/global/plugins/fullcalendar/fullcalendar/fullcalendar.css" rel="stylesheet" type="text/css"/>
    <link href="/static/assets/global/plugins/jqvmap/jqvmap/jqvmap.css" rel="stylesheet" type="text/css"/>
    <link href="/static/assets/admin/pages/css/tasks.css" rel="stylesheet" type="text/css"/>
    <link href="/static/assets/global/css/components.css" rel="stylesheet" type="text/css"/>
    <link href="/static/assets/global/css/plugins.css" rel="stylesheet" type="text/css"/>
    <link href="/static/assets/admin/layout/css/layout.css" rel="stylesheet" type="text/css"/>
    <link href="/static/assets/admin/layout/css/themes/default.css" rel="stylesheet" type="text/css" id="style_color"/>
    <link href="/static/assets/admin/layout/css/custom.css" rel="stylesheet" type="text/css"/>
    <link href="/static/assets/admin/pages/css/search.css" rel="stylesheet" type="text/css"/>
    <link rel="shortcut icon" href="/static/favicon.ico"/>
    <style type="text/css">
        .userAvatat{
            width:32px;
            height: 32px;
        }
    </style>
</head>

<body class="page-header-fixed ">

    <header th:replace="admin/common/header :: header"></header>

    <div class="clearfix"></div>

    <div class="page-container">
        <div th:replace="admin/common/sidebar :: sidebar"></div>
        <div class="page-content-wrapper">
            <div class="page-content">
                <h3 class="page-title">
                    品类管理
                </h3>
                <div class="row" style="margin:20px 0 20px 0;">
                    <button type="button" class="btn green add">添加品类&nbsp;<i class="m-icon-swapright m-icon-white"></i></button>
                </div>

                <div class="row">
                    <div class="portlet box blue">
                        <div class="portlet-title">
                            <div class="caption">
                                <i class="fa fa-cogs"></i>品类列表
                            </div>
                        </div>
                        <div class="portlet-body">
                            <div class="table-responsive">
                                <table class="table table-striped table-hover">
                                    <thead>
                                        <tr>
                                            <th>id</th>
                                            <th>品类名</th>
                                            <th>icon图片</th>
                                            <th>排序权重</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr th:each="category:${data.list}">
                                            <td th:text="${category.id}"></td>
                                            <td th:text="${category.name}"></td>
                                            <td><img style="width:60px;height:60px;" th:src="${category.iconUrl}"/></td>
                                            <td th:text="${category.sort}"></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div>
                        <ul id="page-container" class="pagination"></ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer th:replace="admin/common/footer :: footer"></footer>

    <script src="/static/assets/global/plugins/respond.min.js"></script>
    <script src="/static/assets/global/plugins/excanvas.min.js"></script>
    <script src="/static/assets/global/plugins/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script src="/static/assets/global/plugins/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
    <script src="/static/assets/global/plugins/jquery-ui/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
    <script src="/static/assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="/static/assets/global/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js" type="text/javascript"></script>
    <script src="/static/assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
    <script src="/static/assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script>
    <script src="/static/assets/global/plugins/jquery.cokie.min.js" type="text/javascript"></script>
    <script src="/static/assets/global/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script>
    <script src="/static/assets/global/plugins/jqvmap/jqvmap/jquery.vmap.js" type="text/javascript"></script>
    <script src="/static/assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.russia.js" type="text/javascript"></script>
    <script src="/static/assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.world.js" type="text/javascript"></script>
    <script src="/static/assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.europe.js" type="text/javascript"></script>
    <script src="/static/assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.germany.js" type="text/javascript"></script>
    <script src="/static/assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.usa.js" type="text/javascript"></script>
    <script src="/static/assets/global/plugins/jqvmap/jqvmap/data/jquery.vmap.sampledata.js" type="text/javascript"></script>
    <script src="/static/assets/global/plugins/flot/jquery.flot.min.js" type="text/javascript"></script>
    <script src="/static/assets/global/plugins/flot/jquery.flot.resize.min.js" type="text/javascript"></script>
    <script src="/static/assets/global/plugins/flot/jquery.flot.categories.min.js" type="text/javascript"></script>
    <script src="/static/assets/global/plugins/jquery.pulsate.min.js" type="text/javascript"></script>
    <script src="/static/assets/global/plugins/bootstrap-daterangepicker/moment.min.js" type="text/javascript"></script>
    <script src="/static/assets/global/plugins/bootstrap-daterangepicker/daterangepicker.js" type="text/javascript"></script>
    <script src="/static/assets/global/plugins/fullcalendar/fullcalendar/fullcalendar.min.js" type="text/javascript"></script>
    <script src="/static/assets/global/plugins/jquery-easypiechart/jquery.easypiechart.min.js" type="text/javascript"></script>
    <script src="/static/assets/global/plugins/jquery.sparkline.min.js" type="text/javascript"></script>
    <script src="/static/assets/admin/pages/scripts/sidebarGeneration.js" type="text/javascript"></script>
    <script src="/static/assets/global/scripts/metronic.js" type="text/javascript"></script>
    <script src="/static/assets/global/scripts/pagination.js" type="text/javascript"></script>
    <script src="/static/assets/admin/layout/scripts/layout.js" type="text/javascript"></script>
    <script src="/static/assets/admin/pages/scripts/index.js" type="text/javascript"></script>
    <script src="/static/assets/admin/pages/scripts/tasks.js" type="text/javascript"></script>
    <script th:inline="javascript">
        jQuery(document).ready(function() {
            Metronic.init();
            Layout.init();
            Index.init();

            var baseUrl = "/admin/category/index?page="
            setUrl(baseUrl);

            var totalSize = /*[[${data.total}]]*/;
            var countPerPage = /*[[${data.pageSize}]]*/;
            var allPage = /*[[${data.pages}]]*/;

            setPage(document.getElementById("page-container"), allPage, /*[[${currentPage}]]*/);
            if(allPage <= 1){
                $("#page-container").hide();
            }

            $(".add").on("click", function(){
                window.location.href = "/admin/category/createpage";
            });

        });
    </script>
</body>
</html>